<template>
  <div class="ManageMenu">
    <div @click="$router.push('/manageoffer')">商品管理</div>
    <div @click="$router.push('/managestate')">订单管理</div>
    <div @click="$router.push('/managecustomer')">用户管理</div>
    <div @click="$router.push('/managestaff')">供应商管理</div>
  </div>
</template>

<script>
export default {
  setup() {},
};
</script>

<style>
.ManageMenu {
  display: flex;
  flex-direction: column;
  width: 15%;
  height: 100%;
  background-color: #3a8f8f;
}

.ManageMenu a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15%;
  font-family: "阿里妈妈刀隶体 Regular";
  font-family: 600;
  font-size: 280%;
  color: #fff;
}

@font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/alqM21Wf4LHB.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/31zzzaHz5IE1.woff")
      format("woff");
  font-display: swap;
}

.ManageMenu div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10%;
  color: #fff;
  font-family: "宋体";
  font-size: 120%;
}

.ManageMenu div:hover {
    background-color: #41a7a7;
}
</style>